<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="%VITE_PUBLIC_BASEPATH%logo.svg" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- 这个__system_package-version__会通过uglifyHtmlPlugin.ts自定义插件替换 -->
    <meta name="revised" content="__system_package-version__"/>
    <title>%VITE_PROJECT_TITLE%</title>
    %VITE_VConsole_Script%
  </head>
  <!-- 因为 iOS Safari 默认不会触发 :active 伪类，解决方法是在 body 标签上添加一个空的 ontouchstart 属性。具体说明详见：https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490 -->
  <body ontouchstart="">
    <div id="app">
      <style>
        .chromeframe {
          margin: 0.2em 0;
          background: #409eff;
          color: #000;
          padding: 0.1em 0;
        }
        
        #loader-wrapper {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 999999;
          background-color: white;
        }
        
        #loader {
          display: block;
          position: relative;
          left: 50%;
          top: 36%;
          width: 50px;  /* px-to-viewport-ignore */
          height: 50px;  /* px-to-viewport-ignore */
          margin: -25px 0 0 -25px;  /* px-to-viewport-ignore */
          border-radius: 50%;
          border: 3px solid transparent;  /* px-to-viewport-ignore */
          /* COLOR 1 */
          border-top-color: #409eff;
          -webkit-animation: spin 2s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -ms-animation: spin 2s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -moz-animation: spin 2s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -o-animation: spin 2s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 2s linear infinite;
          /* Chrome, Firefox 16+, IE 10+, Opera */
          z-index: 1001;
        }
        
        #loader:before {
          content: '';
          position: absolute;
          top: 5px;  /* px-to-viewport-ignore */
          left: 5px;  /* px-to-viewport-ignore */
          right: 5px;  /* px-to-viewport-ignore */
          bottom: 5px;  /* px-to-viewport-ignore */
          border-radius: 50%;
          border: 3px solid transparent;  /* px-to-viewport-ignore */
          /* COLOR 2 */
          border-top-color: #409eff;
          -webkit-animation: spin 3s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -moz-animation: spin 3s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -o-animation: spin 3s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -ms-animation: spin 3s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 3s linear infinite;
          /* Chrome, Firefox 16+, IE 10+, Opera */
        }
        
        #loader:after {
          content: '';
          position: absolute;
          top: 15px;  /* px-to-viewport-ignore */
          left: 15px;  /* px-to-viewport-ignore */
          right: 15px;  /* px-to-viewport-ignore */
          bottom: 15px;  /* px-to-viewport-ignore */
          border-radius: 50%;
          border: 3px solid transparent;  /* px-to-viewport-ignore */
          border-top-color: #409eff;
          /* COLOR 3 */
          -moz-animation: spin 1.5s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -o-animation: spin 1.5s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -ms-animation: spin 1.5s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          -webkit-animation: spin 1.5s linear infinite;
          /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite;
          /* Chrome, Firefox 16+, IE 10+, Opera */
        }
        
        @-webkit-keyframes spin {
          0% {
            -webkit-transform: rotate(0deg);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);
            /* IE 9 */
            transform: rotate(0deg);
            /* Firefox 16+, IE 10+, Opera */
          }
          100% {
            -webkit-transform: rotate(360deg);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);
            /* IE 9 */
            transform: rotate(360deg);
            /* Firefox 16+, IE 10+, Opera */
          }
        }
        
        @keyframes spin {
          0% {
            -webkit-transform: rotate(0deg);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);
            /* IE 9 */
            transform: rotate(0deg);
            /* Firefox 16+, IE 10+, Opera */
          }
          100% {
            -webkit-transform: rotate(360deg);
            /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);
            /* IE 9 */
            transform: rotate(360deg);
            /* Firefox 16+, IE 10+, Opera */
          }
        }
        
        .loaded #loader {
          opacity: 0;
          -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
        }
        
        .loaded #loader-wrapper {
          visibility: hidden;
          -webkit-transform: translateY(-100%);
          /* Chrome, Opera 15+, Safari 3.1+ */
          -ms-transform: translateY(-100%);
          /* IE 9 */
          transform: translateY(-100%);
          /* Firefox 16+, IE 10+, Opera */
          -webkit-transition: all 0.3s 1s ease-out;
          transition: all 0.3s 1s ease-out;
        }
        
        /* JavaScript Turned Off */
        
        .no-js #loader-wrapper {
          display: none;
        }
        
        .no-js h1 {
          color: #222222;
        }
        
        #loader-wrapper .load_title {
          font-family: 'Open Sans';
          color: #409eff;
          font-size: 19px;  /* px-to-viewport-ignore */
          width: 100%;
          text-align: center;
          z-index: 9999999999999;
          position: absolute;
          top: calc(36% + 70px);  /* px-to-viewport-ignore */
          opacity: 1;
          line-height: 30px;  /* px-to-viewport-ignore */
        }
            </style>
      <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="load_title">稍等一会, 正在火速加载中</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>

    <script>
      // 禁止ios10+页面缩放: https://blog.csdn.net/qq_46003166/article/details/106851406
      const disabledScale = () => {
        var lastTouchEnd = 0
        document.addEventListener('touchstart', function (event) {
          if (event.touches.length > 1) {
            event.preventDefault()
          }
        })
        document.addEventListener(
          'touchend',
          function (event) {
            var now = new Date().getTime()
            if (now - lastTouchEnd <= 300) {
              event.preventDefault()
            }
            lastTouchEnd = now
          },
          false
        )

        // 阻止双指放大
        document.addEventListener('gesturestart', function (event) {
          event.preventDefault()
        })
      }

      disabledScale()
    </script>
  </body>
</html>
